<template>
    <div class="ranking-container">
      <el-tabs v-model="activeTab" class="tabs" @tab-change="loadPetListByType">
        <el-tab-pane label="综合排行榜" name="all">
          <el-row  class="top-three">
            <el-col :span="8" v-for="(pet, index) in allRanking.slice(0, 3)" :key="pet.id" class="top-item pointer" @click="router.push('/front/petDetail?id=' + pet.id)">
              <div class="rank" :class="{'first': index === 0, 'second': index === 1, 'third': index === 2}">{{ index + 1 }}</div>
                <div class="avatar">
                    <el-avatar :src="pet.img" size="large"></el-avatar>
                </div>
                <div class="info">
                    <div class="name">{{ pet.name }}</div>
                </div>
            </el-col>

          </el-row>
          <el-row class="pointer" v-for="(pet, index) in allRanking.slice(3)" :key="pet.id" style="margin-top: 20px;" @click="router.push('/front/petDetail?id=' + pet.id)">
            <el-col :span="4">
              <div class="rank">{{ index + 4 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="avatar">
                  <el-avatar :src="pet.img" :size="33"></el-avatar>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="info">
                  <div class="name">{{ pet.name }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="info">
                  <div class="name">{{ pet.sex }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="info">
                  <div class="name">{{ pet.typeName }}</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="info">
                  <div class="likes">价格：{{ pet.price }} 元</div>
              </div>
            </el-col>
            
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-for="type in petTypeList" :key="type.id" :label="type.name + '排行榜'" :name="type.id">
          <el-empty v-if="petOtherList == null || petOtherList.length == 0" description="暂无数据" />
          <el-row  class="top-three">
            <el-col :span="8" v-for="(pet, index) in petOtherList.slice(0, 3)" :key="pet.id" class="top-item pointer" @click="router.push('/front/petDetail?id=' + pet.id)">
              <div class="rank" :class="{'first': index === 0, 'second': index === 1, 'third': index === 2}">{{ index + 1 }}</div>
                <div class="avatar">
                    <el-avatar :src="pet.img" size="large"></el-avatar>
                </div>
                <div class="info">
                    <div class="name">{{ pet.name }}</div>
                </div>
            </el-col>
          </el-row>
          <el-row class="pointer" v-for="(pet, index) in petOtherList.slice(3)" :key="pet.id" style="margin-top: 20px;" @click="router.push('/front/petDetail?id=' + pet.id)">
            <el-col :span="4">
              <div class="rank">{{ index + 4 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="avatar">
                  <el-avatar :src="pet.img" :size="33"></el-avatar>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="info">
                  <div class="name">{{ pet.name }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="info">
                  <div class="name">{{ pet.sex }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="info">
                  <div class="name">{{ pet.typeName }}</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="info">
                  <div class="likes">价格：{{ pet.price }} 元</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  import request from "@/utils/request";
import router from "@/router/index.js";
  
  export default {
    name: "PetRanking",
    setup() {
      const activeTab = ref("all");
  
      const allRanking = ref([]);

      const petOtherList = ref([])

      const petTypeList = ref([])
  
      const birdRanking = ref(allRanking.value.filter((pet) => pet.name.includes("Tweety") || pet.name.includes("Donald")));

      const load = () => {
        request.get('/pet/rank').then(res =>{
          allRanking.value = res.data
        })
        request.get('/petType/selectAll').then(res =>{
          petTypeList.value = res.data
        })
      }
      load()

      const loadPetListByType = (typeId) =>{
        if (typeId != 'all')  {
          request.get('/pet/rankType/'+typeId).then(res => {
            petOtherList.value = res.data
          })

        }       
      }
  
      return {
        activeTab,
        allRanking,
        birdRanking,
        petTypeList,
        router,
        loadPetListByType,
        petOtherList,
      };
    },
  };
  </script>
  
  <style scoped>
  .ranking-container {
    width: 61%;
    margin: 0 auto;
    padding: 20px;
  }
  
  .tabs {
    margin-top: 20px;
  }
  
  .top-three {
    /* display: flex; */
    /* justify-content: space-between; */
    margin-bottom: 20px;
  }
  
  .top-item {
    display: flex;
    align-items: center;
    /* width: 30%; */
  }
  
  .rank {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: #f0f0f0;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
  }
  
  .rank.first {
    background-color: #ff4081;
    color: white;
  }
  
  .rank.second {
    background-color: #ffeb3b;
    color: white;
  }
  
  .rank.third {
    background-color: #4caf50;
    color: white;
  }
  
  .avatar {
    margin-right: 10px;
  }
  
  .info {
    flex: 1;
  }
  
  .name {
    font-size: 16px;
  }
  
  .likes {
    font-size: 14px;
    color: #666;
  }
  
  .remaining {
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 10px; */
  }
  
  .rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .rank {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
  }
  .pointer {
    cursor: pointer;
  }
  </style>